<template>
    <div class="box">
        <div class="time" @click="selectDay">
            <div>住 {{ formatDay(startDate) }}</div>
            <div>离 {{ formatDay(leaveDate) }}</div>
        </div>
        <div class="search"><van-search  placeholder="关键字/位置/民宿" autofocus background="#f1f1f1"/></div>
    </div>

    <van-calendar 
        v-model:show="show" 
        type="range" 
        :show-confirm="false"
        @confirm="onConfirm" 
        allow-same-day
        safe-area-inset-top
    />
</template>

<script setup>
    import {ref} from "vue"
    import useHomeStore from "@/stores/modules/home";
    import { storeToRefs } from "pinia";
    import {formatDay} from "@/utils/getDate"

    const homeStore = useHomeStore()
    const {startDate,leaveDate} = storeToRefs(homeStore)
    const show = ref(false)

    function selectDay(){
        show.value = true
    }

    function onConfirm(data){
        homeStore.changDate(data)
        show.value = false
    }

</script>

<style lang="less" scoped>
    .box {
        width: 100%;
        display: flex;
        background-color: #f1f1f1;
        font-size: 12px;
        .time {
            display: flex;
            flex-direction: column;
            justify-content: center;
            border-left: 1px solid #fcfcfc;
            color: #555;
            div {
                padding: 5px;
                border-bottom: 1px solid #fcfcfc;
            }
        }
        .search {
            flex:2
        }
    }
</style>